<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery表格插件|改变列宽--奇偶行不同色--鼠标滑过变色--点击变色</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Map.js"></script>
</head>
<body>

	<%
		int counth = 500;
	%>
	<div class="b1"
		style="height: <%=counth%>px;position: relative;width:800px;background-color: #dddddd"
		_id="zzltable">
		<div class="b2"
			style="position: absolute; background-color: #edeef0; left: 1px; top: 1px; bottom: 1px; right: 1px">
			<!-- 左边线 -->
			<%
				int toph = 24;
				int coutclo = 10;
				int countrows = 30;
				int conh = counth - 2 - 24;
			%>
			<%--              <div class="b3" style="position: absolute;right: 0px;width: 16px;background-color:#dddddd;top:0px;height:<%=toph %>px;z-index:99"> --%>
			<!--                             <div class="c1" style="position: absolute;left: 1px;bottom: 1px;top: 0px;right: 0px;background-color: #efefef ;z-index:100">  -->

			<!--                             </div>  -->
			<!--            </div> -->
			<div class="b4"
				style='height: 70px; width: 798px; background-color: #efefef; position: absolute; overflow: auto; top: 0px'
				_id="sb" _root=1>

				<div class="c2"
					style="position: absolute; background-color: #dddddd; top: 23px; height: 1px; left: 0px; right: 0px; z-index: 99">
				</div>
				<!-- 下边线 -->

				<%
					int left = 0;
					int clow = 100;
					int clowhr = 1;
					for (int i = 0; i < coutclo; i++) {
						String color = "#edeef0";
				%>
				<div class="b5"
					style='line-height:<%=toph%>px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; text-align: center;height:80px;width:<%=clow%>px;background-color:<%=color%>;position:absolute;left:<%=left%>px;'
					_root=2 _son=1>
					<%=1000009%><%=i%>
				</div>
				<%
					left += clow;
						color = "#dddddd";
				%>



				<div class="b6"
					style='cursor: e-resize;height:80px;width:<%=clowhr%>px;background-color:<%=color%>;position:absolute;left:<%=left%>px;top:0px;z-index:100'
					_root=3 " _son=1>
					<div class="c3"
						style="width: 5px;left: -5px;background-color: white;position: absolute;top:3px;height:<%=toph - 6%>px;z-index:101;filter:alpha(opacity=1);-moz-opacity:0.01;-khtml-opacity: 0.01;opacity: 0.01;;overflow:hidden">
						<%=i%>
					</div>
					<!-- 中间线 -->
				</div>
				<%
					left += clowhr;
					}
				%>
			</div>
			<div class="b7"
				style='height:<%=conh%>px;width:798px;background-color:#edeef0;position:absolute;overflow:auto;top:<%=toph%>px'
				_id="sb2" _root=1>
				<%
					int left2 = 0;
					int top = 0;
					int clow2 = 100;
					for (int i = 0; i < coutclo; i++) {
				%>
				<div class="b8"
					style='height:<%=conh%>px;width:<%=clow2%>px;position:absolute;left:<%=left2%>px;top:<%=top%>px'
					_son=1>
					<%
						for (int jb = 0; jb < countrows; jb++) {
								String ck = "#f7f7f7";
								if (jb % 2 == 0) {
									ck = "white";
								}
					%>
					<div class="b10"
						style="height:20px;background-color: <%=ck%>;text-align:center">
						<%=jb%>
					</div>
					<%
						}
					%>
				</div>
				<%
					left2 += clow2;
						String color2 = "#dddddd";
				%>
				<div class="b9"
					style='height:<%=conh%>px;width:<%=clowhr%>px;background-color:<%=color2%>;position:absolute;left:<%=left2%>px;top:<%=top%>px'
					_son=1></div>
				<!-- 右边线 -->
				<%
					left2 += clowhr;
					}
				%>
			</div>
		</div>
	</div>


	<br><br><br> <textarea rows="40" cols="140" id=zzl2></textarea>
				<script>
					var hr = $("div[_root=3]");//中间线
					console.info(hr.length);
					var curhr;
					var sb = $("div[_id=sb]");//下划线
					var zzltable = $("div[_id=zzltable]");//最为层div
					var resize = false;
					hr.mousedown(function(e) {
						resize = true;
						curhr = $(this);
						return false;
					});
					zzltable
							.mousemove(function(e) {
								if (resize) {
									var left = e.clientX;
									left += $("div[_id=sb2]").scrollLeft();//内容
									//当前的hr分割线对象
									var objhr = $(curhr);
									var left_pos = parseInt(sb.offset().left)
											+ parseInt(getprewidth(objhr.prev()));
									var df = left - left_pos;
									var curpre = curhr.prev();
									if ((curpre.width() + df) > 20) {
										curpre
												.width(curpre.width() + df
														+ "px");
										curhr.css("left",
												parseInt(getprewidth(objhr
														.prev()))
														+ "px");
										var tempcur = curhr.next();
										while (true) {
											var _root = tempcur.attr("_root");
											if (_root) {
												var left_pos2 = parseInt(getprewidth(tempcur
														.prev()));
												tempcur.css("left", left_pos2
														+ "px");
												tempcur = tempcur.next();
											} else {
												break;
											}
										}
										//触发底部列的宽度变化同步
										changesize();
									}
								}
							});
					function changesize() {
						var sb2 = $("div[_id=sb2]");
						var map = new Map();
						sb.find("div[_son=1]").each(function(tempi) {
							var _width = $(this).css("width");
							var _left = $(this).css("left");
							map.put(tempi + "_w", _width);
							map.put(tempi + "_l", _left);
						});
						sb2.find("div[_son=1]").each(function(tempi) {
							var _width = map.get(tempi + "_w");
							var _left = map.get(tempi + "_l");
							$(this).css("left", _left);
							$(this).css("width", _width);
						});
					}
					zzltable.mouseup(function(e) {
						resize = false;
					});
					zzltable.bind("mouseleave", function(e) {
						resize = false;
						return false;
					});
					//求得当前对象最右边的点离浏览器最左边的距离
					function getprewidth(obj) {
						var fw = obj.width();
						var prev = obj.prev();
						var _root = prev.attr("_root");
						if (_root) {
							return fw += getprewidth(prev);
						} else {
							return fw;
						}
					}
					$("div[_id=sb2]").scroll(function() {
						var left = $(this).scrollLeft();
						$("div[_id=sb]").scrollLeft(left);
					});
					$("div[_id=sb]").scroll(function() {
						$(this).scrollTop(0);//固定滚动条不能上下拖动
						var left = $("div[_id=sb2]").scrollLeft();
						$(this).scrollLeft(left);//固定头部滚动条的位置和底部内容同步
						changesize();
					});
				</script> <%!public static String getRandColorCode() {
		String r, g, b;
		Random random = new Random();
		r = Integer.toHexString(random.nextInt(256)).toUpperCase();
		g = Integer.toHexString(random.nextInt(256)).toUpperCase();
		b = Integer.toHexString(random.nextInt(256)).toUpperCase();
		r = r.length() == 1 ? "0" + r : r;
		g = g.length() == 1 ? "0" + g : g;
		b = b.length() == 1 ? "0" + b : b;
		return r + g + b;
	}%>
</body>
</html>